<template>
	<view class="index-container">
		<!-- 轮播 -->
		<view class="banner-container">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem="clickItem" mode="round" :info="bannerList" :current="current" :dots-styles="dotsStyles">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay circular>
					<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index">
						<image class="swiper-item-img" :src="item.url" mode="aspectFill"></image>
						<text class="swiper-item-title">{{ item.title }}</text>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<StoreList :storeList="storeList" :selectedStore.sync="selectedStore" />
		<!-- 功能 -->
		<view class="funciton-container">
			<uni-grid :column="3" :showBorder="false" :square="false">
				<uni-grid-item class="fun-gird-item" v-for="(fun, index) in functionList" :index="index" :key="index">
					<view class="fun-item" @click="toPath(fun.path)">
						<view class="fun-item-title">
							<text class="title-text">{{ fun.title }}</text>
							<image class="fun-item-icon" :src="fun.icon" mode=""></image>
						</view>
						<view class="fun-item-desc ellipsis">{{ fun.desc }}</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<StoreMember :memberList="memberList" />
	</view>
</template>

<script>
	import StoreList from '@/components/store-list/StoreList.vue';
	import StoreMember from '@/components/store-member/StoreMember.vue';
	import commonUtils from '@/common/util/common.js'
	export default {
		components: {
			StoreList,
			StoreMember
		},
		data() {
			return {
				bannerList: [{
						url: require('../../static/index/banner1.png'),
						title: '内容 A'
					},
					{
						url: require('../../static/index/banner1.png'),
						title: '内容 B'
					},
					{
						url: require('../../static/index/banner1.png'),
						title: '内容 C'
					}
				],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
					selectedBorder: '1px rgba(255, 255, 255, .9) solid'
				},
				current: 0,
				swiperDotIndex: 0,
				functionList: [{
						title: '政策公告',
						icon: require('../../static/index/policy.png'),
						desc: '服务升级通知123123123',
						path: '/pages/store/announcement/announcement'
					},
					{
						title: '行业信息',
						icon: require('../../static/index/industry.png'),
						desc: '暂无数据'
					},
					{
						title: '店铺说说',
						icon: require('../../static/index/shop.png'),
						desc: '设备求租店铺出租',
						path: '/pages/store/moments/moments'
					}
				],
				storeList: [{
						id: '1',
						name: '未成年人防控中心',
						icon: require('../../static/index/internet-bar.png'),
						status: '正常营业',
						color: 'success'
					},
					{
						id: '2',
						name: '量版式kvt',
						icon: require('../../static/index/KTV.png'),
						status: '等待提交',
						color: 'waitting'
					},
					{
						id: '3',
						name: '电影院',
						icon: require('../../static/index/cinema.png'),
						status: '停业',
						color: 'shutdown'
					}
				],
				selectedStore: '1',
				memberList: [{
						avatar: require('../../static/index/member.png'),
						name: '张三1',
						post: '员工',
						id: '1'
					},
					{
						avatar: require('../../static/index/member.png'),
						name: '张三2',
						post: '员工',
						id: '2'
					},
					{
						avatar: require('../../static/index/member.png'),
						name: '张三3',
						post: '员工',
						id: '3'
					},
					{
						avatar: require('../../static/index/member.png'),
						name: '张三4',
						post: '员工',
						id: '4'
					}
				]
			};
		},
		onLoad() {
			commonUtils.loadFont()
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			clickItem(e) {
				this.swiperDotIndex = e;
			},
			toPath(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.index-container {
		padding: 0 24upx;
		font-family: 'PingFangSc';
	}

	.banner-container {
		/deep/ .uni-swiper__dots-box {
			justify-content: flex-end;
			right: 50upx !important;
		}

		.swiper-box {
			height: 344upx;
		}

		.swiper-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 344upx;
			color: #fff;
			position: relative;

			.swiper-item-title {
				position: absolute;
				font-size: 14px;
				bottom: 16upx;
				left: 28upx;
			}
		}
	}

	.funciton-container {
		padding: 50upx 0;

		.fun-gird-item:not(:last-child) {
			.fun-item {
				margin-right: 20upx;
			}
		}

		.fun-item {
			height: 130upx;
			border: 1px solid rgb(235, 235, 235);
			border-radius: 8upx;
			padding: 20upx;
			display: flex;
			flex-direction: column;

			/deep/.uni-grid-item__box {
				border-radius: 8px;
			}

			.fun-item-title {
				display: flex;
				font-size: 15px;
				flex: 1;

				.title-text {
					flex: 1;
					display: inline-block;
				}

				.fun-item-icon {
					width: 40upx;
					height: 40upx;
				}
			}

			.fun-item-desc {
				color: rgb(126, 126, 126);
				font-size: 13px;
				flex: 1;
			}
		}
	}
</style>
